<template>
  <div id="cart">
    <NavBar class="navbar">
      <template v-slot:center>
        购物车({{proLength}})
      </template>
    </NavBar>
    <Scroll class="content">
      <cartList
      v-for="(item,index) in produce" :key="index"
      :proItem='item'
      />
    </Scroll>
  </div>
</template>

<script>
// 导入组件
import NavBar from '@/components/common/navbar/NavBar'
import Scroll from '@/components/common/scroll/Scroll'
import cartList from './childComps/cartList'
// 导入vuex 内容
import { mapGetters, mapState } from 'vuex'
export default {
  computed: {
    ...mapGetters(['proLength']),
    ...mapState(['produce'])
  },
  components: {
    NavBar,
    Scroll,
    cartList
  }
}
</script>

<style lang='scss' scoped>
#cart {
  height: 100vh;
  position: relative;
   .navbar {
   position: relative;
   background-color: var(--color-tint);
    color: #fff;
    font-size: 16px;
  }
  .content{
    position: absolute;
    top: 44px;
    bottom:49px;
    left: 0;
    right: 0;
    overflow: hidden;
  }
}

</style>
